<template>
	<view class="home">
		<view class="box">
			<view class="box_list">
				<view class="flex_lr list">
					<view class="f1">订单编号</view>
					<view class="f1">{{shop_data.express_no}}</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">商品名称</view>
					<view class="f1">{{shop_data.item[0].goodname}}</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">商品金额</view>
					<view class="f1">{{shop_data.good_amount}}</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">售后类型</view>
					<view class="f1">退货退款</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_list">
				<view class="flex_row" style="margin-bottom: 30rpx;">
					<view style="color: #aa0000; font-size: 40rpx; margin-right: 10rpx;">*</view>
					<view>请选择原因</view>
				</view>
				<view @click="array(index)" class="flex_lr list" v-for="(item,index) in refund_reasons">
					<view class="f1">{{item.reason}}</view>
					<text :class="item.select==1? 'tyIcon-round-check' : 'tyIcon-round'"
						class="text-1a padding-right-10"></text>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_list">
				<view class="f1">补充说明</view>
				<view style="margin-top: 20rpx;">
					<textarea v-model="data.refund_reason" class="txt" name="" id="" placeholder="非必填" cols="30"
						rows="10"></textarea>
				</view>
				<image :src="data.isAllChoose" mode="" class="up_img margin-top-20" v-if="data.isAllChoose"></image>
				<view @click="uploadImage" class="up_img y_center flex_center margin-top-20" v-else>
					<view class="f3">+</view>
					<view>上传凭证</view>
				</view>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="y_center">
			<view @click="refund" class="box_but flex_center">提交</view>
		</view>
		<!-- 浮层 -->
		<view class="layer" v-if="show_sign">
			<view class="layerbg">
				<view class="text-36 text-bold margin-top-65 text-center">你已提交退换货,后台审核中</view>
				<view @click="show_sign = false" class="border-top-ed padding-tb-25 margin-top-30 text-center">
					返回
				</view>
			</view>
			<image @click="show_sign = false" src="/static/board/close.png" mode="" class="closeimg"></image>
		</view>
	</view>
</template>

<script>
	import config from '@/components/hzjc/config'
	export default {
		data() {
			return {
				refund_reasons: [],
				isAllChoose: 0,
				indexArray: [],
				shop_data: {},
				data: {
					id: '',
					refund_reason_id: [],
					refund_reason: '',
					isAllChoose: '',
				},
				show_sign: false
			}
		},
		onLoad(e) {
			if ('id' in e) {
				this.data.id = e.id
			}
			this.init()
		},
		methods: {
			init() {
				this.rq.getData('Memorder/refund_reasons', {}).then(res => {
					if (res.code == 1) {
						this.refund_reasons = res.data
						this.refund_reasons.forEach((item, index) => {
							item.select = 0
						})
						console.log(this.refund_reasons)
					}
				})
				this.rq.getData('Memorder/order_info', {
					id: this.data.id
				}).then(res => {
					if (res.code == 1) {
						this.shop_data = res.data
					}
				})
			},
			refund() {
				let filteredItems = this.refund_reasons.filter(item => item.select == 1); //筛选
				let ids = filteredItems.map(item => item.id) //添加id
				console.log(ids)
				this.rq.getData('Memorder/refund', {
					id: this.data.id,
					refund_reason: this.data.refund_reason,
					refund_image: this.data.isAllChoose,
					refund_reason_id: ids.join(',')
				}).then(res => {
					if (res.code == 1) {
						this.show_sign = true
					}
				})
			},
			array(index) {
				this.refund_reasons.forEach((item, i) => {
					if (index == i) {
						item.select = item.select == 0 ? 1 : 0
					}
				})
				this.refund_reasons = JSON.parse(JSON.stringify(this.refund_reasons))
			},
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						uni.showLoading()
						uni.uploadFile({
							url: config.host + 'api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var filedata = JSON.parse(uploadFileRes.data)
								that.data.isAllChoose = filedata.data.fullurl
								uni.hideLoading()
							}
						});

					},
					fail: (err) => {
						// 处理错误情况
						console.error(err);
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 40rpx;
	}

	.service {
		border-radius: 50rpx;
		padding: 40rpx 30rpx;
		background: #000;

		.service_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.phone_img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.txt {
		background: #f3f3f3;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.f1 {
		font-size: 26rpx;
	}

	.box_list {
		background: #FFF;
		box-shadow: 5px 5px 10px 0 rgba(186, 186, 186, 0.3);
		border-radius: 20px;
		padding: 40rpx 40rpx 20rpx 40rpx;

		.list {
			min-height: 80rpx;
			padding-bottom: 10rpx 0;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #ececec;

			.list_input {
				text-align: right;
			}
		}

		.box_list_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.f2 {
			font-size: 26rpx;
		}

		.f3 {
			font-size: 75rpx;
		}

		.up_img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10px;
			background-color: #f3f5f7;
		}
	}

	.sex_box {
		border-radius: 10rpx;
		background: #000;
		color: #FFF;
		padding: 10rpx 40rpx;
	}

	.sex_box_b {
		border-radius: 10rpx;
		color: #000000;
		border: 2rpx solid #000;
		padding: 10rpx 40rpx;
	}

	.box_but {
		position: fixed;
		bottom: 100rpx;
		width: 80%;
		font-size: 34rpx;
		color: #FFF;
		padding: 30rpx 0;
		background: #000;
		border-radius: 50rpx;
		z-index: 99;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.layerbg {
		width: 540rpx;
		/* height: 418rpx; */
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 400rpx;
		padding-top: 35rpx;
	}

	.closeimg {
		width: 58rpx;
		height: 58rpx;
		margin-top: 40rpx;
	}
</style>